<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>用户编辑框</title>
</head>
<body>
	<div>
		<fieldset class="layui-elem-field layui-field-title"
			style="margin-top: 10px;">
			<legend>基础信息</legend>
		</fieldset>
		<form class="layui-form" id="add-form">
			<div class="layui-form-item">
				<label class="layui-form-label">用户名</label>
				<div class="layui-input-block">
					<input type="text" name="username" lay-verify="username"
						autocomplete="off" placeholder="请输入 用户名" class="layui-input"
						id="username">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">密码</label>
				<div class="layui-input-inline">
					<input type="password" name="password" lay-verify="password"
						id='password' placeholder="请输入密码" autocomplete="off"
						class="layui-input">
				</div>
				<div class="layui-form-mid layui-word-aux">请填写6到12位密码</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">确认密码</label>
				<div class="layui-input-inline">
					<input type="password" name="repassword" lay-verify="repassword"
						placeholder="请确认密码" autocomplete="off" class="layui-input">
				</div>
				<div class="layui-form-mid layui-word-aux">请保证密码一致</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">部门</label>
				<div class="layui-input-inline">
					<select name="department" id="department">
						<option value="">请选择部门</option>
					</select>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">角色</label>
				<div class="layui-input-block" id="role"></div>
			</div>
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn layui-btn-small" lay-submit=""
						lay-filter="demo3">确定</button>
					<button type="reset"
						class="layui-btn layui-btn-primary layui-btn-small">重置</button>
				</div>
			</div>
		</form>
	</div>
	<script>
		layui.config({
			base : 'plugins/layui/modules/'
		}).use([ 'form' ], function() {
			var form = layui.form(),
				$ = layui.jquery,
				layer = layui.layer;
	
			//保存查询出的role表
			var curole = [],
				norepeat = {},
				//保存查询出的department表
				cudepartment = [];
	
			//加载role
			$.ajax({
				url : 'allRoles',
				type : "GET",
				async : false,
				success : function(info) {
					$('#role').html('');
					curole = info;
					for (var i in info) {
						name = info[i].name;
						$('#role').append('<input type="checkbox" name=' + name + ' title=' + name + '>')
					}
				}
			});
	
			//加载department
			$.ajax({
				url : 'allDepartments',
				type : "GET",
				async : false,
				success : function(info) {
					cudepartment = info;
					for (var i in info) {
						name = info[i].name;
						$('#department').append('<option value=' + name + '>' + name + '</option>')
					}
				}
			});
	
	
			//保证重新加载后  样式也更新
			$('#add-form')[0].reset();
	
			//自定义验证规则
			form.verify({
				username : function(value) {
					var tag = true;
					$.ajax({
						url : 'getUserByName/' + value,
						type : "GET",
						async : false,
						success : function(info) {
							if (info.name != null) {
								tag = false;
							}
						}
					});
					if (value.length == 0) {
						return '用户名不能为空 ';
					} else if (!tag) {
						return '用户名已注册';
					}
				},
				department : function(value) {
					if (value.length == 0) {
						return '请选择部门';
					}
				},
				password : [ /(.+){6,12}$/, '密码必须6到12位' ],
				repassword : function(value) {
					if (value != $('#password').val()) {
						return '密码不一致';
					}
				}
			});
	
			//监听提交
			form.on('submit(demo3)', function(data) {
				if (JSON.stringify(norepeat) != JSON.stringify(data.field)) {
					var json = {
						"name" : $('#username').val(),
						"password" : $('#password').val(),
						"role" : [],
						"department" : {}
					};
					for (var i in data.field) {
						for (var j in curole) {
							if (curole[j].name == i) {
								json.role.push(curole[j]);
							}
						}
					}
	
					for (var i in cudepartment) {
						if (cudepartment[i].name == data.field.department) {
							json.department = cudepartment[i];
						}
					}
	
					norepeat = data.field;
	
					$.ajax({
						url : 'addUser',
						type : "POST",
						data : JSON.stringify(json),
						async : false,
						dataType : 'json',
						contentType : 'application/json;charset=utf-8',
						success : function(info) {
							layer.msg('添加成功！');
							$('#add-form')[0].reset();
						}
					});
	
				}
				return false;
			});
		});
	</script>
</body>

</html>